
<include file="mobile/Public/header" />

<link rel="stylesheet" href="__CSS__/detail_font.css">
<link rel="stylesheet" href="__CSS__/makeorder.css">
<link rel="stylesheet" href="__CSS__/good.css">
<style>
    .status-section{padding: 0.834rem;}
    .detail-title{line-height: 1.7;}
    .delivery-section{padding-right: 2rem}
    .delivery-status{color: #359A2B}
    .detail-footer.btn-footer{text-align: right;padding-right: 0.834rem}
    .remark-input{padding-left: 7rem}
    .paystyle-select{padding-left: 12rem; color: #333333;border: none;outline: none}
    .paystyle{position: absolute; top: -5.5rem;width: 100%}
    .good-section-img {height: auto; width: 48%; }
    .good-section-left{position:inherit;}
</style>
<style>
    body {
        background-color: #fff;
        margin-bottom: 60px ;
    }
    .order-title {
        display: flex;
        align-items: center;
        padding:8px 15px;
        border-bottom: 1px solid #ddd;
        height: 50px;

    }

    .order-title img  {
        width:50px;
        display: block;
        border-radius: 3px;
    }


    .order-info {
        flex:1;
        display: flex;
        flex-flow:column nowrap;
        text-align: left;
        margin-left:15px;
        height: 100%;
        justify-content: space-between;
    }

    .order-info h1,.item-content h2  {
        color: #4a4a4a;
        font-size:18px;
    }

    .order-info h2,.item-content p  {
        color: #a5a5a5;
        font-size:16px;
    }

    .time-line {
        position: relative;
        margin:20px 7vw;

    }



    .time-line:before {
        content: '';
        position: absolute;
        top: 0;
        left: 60px;
        height: 100%;
        width: 2px;
        background: #ddd;
    }

    .item {
        display: flex;
        font-size:14px;
        position: relative;
        margin-bottom:30px;
    }

    .item:before {
        content: '';
        background-color: #888;
        width: 5px;
        height: 5px;
        border: 3px #ddd solid;
        border-radius: 50%;
        box-shadow: 0 1px 2px #aaa;
        position: absolute;
        left: 55px;
        top: 6px;
    }
    
    .item:first-child:before {
        background-color: #ee0027;
    }


    .item-time {
        width:45px;
        text-align: center;
    }

    .item-content {
        flex: 1;
        margin-left:40px;
    }

    hr {
        border: 1px solid #ddd;
    }


    /* 对话留言*/

    .dialog {
        margin: 20px 15px;
    }

    .dialog-item {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

    .dialog-content {
        flex: 1;

        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
    }

    .dialog-content .content {
        background-color: #fe8fae;
        border-radius: 6px;
        padding:5px 10px;
        color: #fff;
        text-align: left;
    }

    .dialog-content time {
        font-size: 12px ;
        text-align: right;
        color: #b1b1b1;

    }

    .dialog-avatar {
        flex-basis:40px ;

        margin-left: 5px;
        margin-right: 5px;
    }

    .dialog-avatar img {
        display: block;

        width:100%;
        border-radius: 50%;
    }

    .dialog-item.left {
        justify-content: flex-end;
        flex-flow: row-reverse nowrap;
    }

    .dialog-item.left time   {
        text-align: left;
    }

    .dialog-item.left .content {
        background-color: #fff;
        color: #666;
        border: 1px solid #ddd;
    }

    .dialog-item.left .dialog-content {
        align-items: flex-start;

    }


    .comment {
        position: fixed;
        bottom:0;
        background-color: #f3f3f3;

        display: flex;
        padding:  10px;
        border-top: 1px solid #eee;
    }

    .comment .input  {
        flex: 3;
        border: 1px solid #ddd;
        padding: 5px;
        border-radius: 3px;
        background-color: #fff;
        color: #666;
        outline: none;

    }

    .comment button {
        flex: 1;
        background-color: #fe8fae;
        color: #fff;
        border: none;
        border-radius: 5px;
        margin-left:10px;
        font-size: 16px;
        font-weight: 600;
    }
</style>
<!--
<header class="order-title">
    <div><img src="__IMG__/cloth01.jpg" alt=""></div>
    <div class="order-info">
        <h1>订单名称</h1>
        <h2>订单人，预计签约日期 -&#45;&#45;</h2>
    </div>
</header>
<div class="time-line">
    <section class="item">
        <div class="item-time">08-25<br><span>00:00</span></div>
        <div class="item-content">
            <h2>标题</h2>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
    </section>
    <section class="item">
        <div class="item-time">08-21<br><span>00:00</span></div>
        <div class="item-content">
            <h2>标题2</h2>
            <p>内容内容内容内容内容内容内容 容内容内容内容</p>
        </div>
    </section>
    <section class="item">
        <div class="item-time">08-15<br><span>00:00</span></div>
        <div class="item-content">
            <h2>标题3</h2>
            <p>内容内容内容内容ad容内容内容内容内容内容内容内容内容</p>
        </div>
    </section>
</div>

<hr>

<div class="dialog">
    <section class="dialog-item right">
        <div class="dialog-content">
            <p class="content">你瞅啥。你瞅啥。你瞅啥。你瞅啥。你瞅啥。你瞅啥。你瞅啥。</p>
            <time>2016-06-21 19:14</time>
        </div>
        <div class="dialog-avatar">
            <img src="__IMG__/logo.png" alt="头像">
        </div>
    </section>

    <section class="dialog-item right">
        <div class="dialog-content">
            <p class="content">瞅你咋地</p>
            <time>2016-06-21 19:14</time>
        </div>
        <div class="dialog-avatar">
            <img src="__IMG__/logo.png" alt="头像">
        </div>
    </section>

    <section class="dialog-item left">
        <div class="dialog-content">
            <p class="content">你瞅啥。</p>
            <time>2016-06-21 19:14</time>
        </div>
        <div class="dialog-avatar">
            <img src="__IMG__/logo.png" alt="头像">
        </div>
    </section>
</div>

<footer class="comment">
    <div class="input" contenteditable="true">

    </div>
    <button>发送</button>
</footer>-->

<header class="color-main vertical-box">
    <span class="header-title">订单详情</span>
    <div class="header-left vertical-box">
        <img class="img-btn" src="__IMG__/back.png" onclick="window.location.href='{:U('shop/index/true_order_list')}'">
    </div>
    <div class="header-right vertical-box">
        <img class="img-btn" src="__IMG__/home.png" onclick="window.location.href='{:U('shop/index/index')}'">
    </div>
</header>
<php>
$status_data = array(
    '1' => array(
        'title' => '进行中'
    ),
    '2' => array(
        'title' => '已完成'
    ),
    '3' => array(
        'title' => '已取消'
    )
)
</php>
<article class="btn-footer-margin">
    <section class="status-section color-main">
        <p class="big-text detail-title"><php> if(!empty($order['status'])) echo $status_data[$order['status']]['title'] </php></p>
        <p class="small-text white-tips-font">采购数量：<span><php> echo $order['quantity'] </php></span></p>
    </section>


    <section class="good-info-section tips-font last-liner-section margin-bottom">
        <div>
            <p>订单号：<php> if(!empty($order['id'])) echo $order['id'] </php></p>
            <p>联系方式：<php> if(!empty($order['phone'])) echo $order['name'].'--'.$order['phone'] </php></p>
            <p>下单时间：<php> if(!empty($order['create_time'])) echo date('Y-m-d H:i:s',$order['create_time']) </php></p>
            <php> if(!empty($order['warn_time'])){ </php>
            <p>交期预警：<php> if(!empty($order['warn_time'])) echo date('Y-m-d H:i:s',$order['warn_time']) </php></p>
            <php>}</php>
        </div>
    </section>

    <section class="good-info-section tips-font last-liner-section margin-bottom">
        <div>
            <p>规格和要求：<php> if(!empty($order['title'])) echo $order['title'] </php></p>

        </div>
    </section>

    <section class="linear-section last-liner-section margin-top-section margin-bottom">
        <span class="linear-title vertical-box"><span>留言接口</span></span>
        <input class="remark-input linear-input border-box" type="text" value="" id="remark" placeholder="你可以补充你的需求" style="
    outline: none;
    padding-right: 50px;
">
        <button class="submit-btn" style="
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    outline: none;
    height: 100%;
    border: none;
    width: 50px;
    color: #fff;
    background-color: #f60;
    text-align: center;
">提交</button>
    </section>

</article>
<footer class="btn-group detail-footer btn-footer border-box">
    <a href="#" class="remark-list">获取留言列表</a>
    <a href="#" class="progress-list">获取进度列表</a>
    <php>
    if($order['status']==1){</php>
        <button class=".cancel-order-btn color-disable">取消</button>
    <php>}</php>

</footer>

<include file="mobile/Public/footer" />

<script>
    //'jquery' or 'zepto' 脚本入口,按情况选择加载
    seajs.use(['jquery','zepto'], function () {
        $(document).ready(function () {
            $('.btn-group').on('click','button',function () {
                var id = "{$order['id']}";
                if(confirm('您确定要取消吗？')){
                    $.post('{:U('shop/index/true_order_list/')}',{id:id}, function (ret) {
                        if(ret.status==1){
                            alert('取消成功！');
                            window.location.reload();
                        }
                    })
                }
            });
            $('.remark-list').click(function () {
                var page = 1;
                var r = 10;
                var order_id = "{$order['id']}";
                $.post('{:U('shop/index/true_order_remark/')}',{page:page, r:r, order_id:order_id}, function (ret) {
                    if(ret.status==1){
                        alert('获取留言列表成功！');
                    }
                })
            });
            $('.progress-list').click(function () {
                var page = 1;
                var r = 10;
                var order_id = "{$order['id']}";
                $.post('{:U('shop/index/true_order_progress/')}',{page:page, r:r, order_id:order_id}, function (ret) {
                    if(ret.status==1){
                        alert('获取进度列表成功！');
                    }
                })
            });
            $(".submit-btn").click(function () {
               var remark = $("#remark").val();
               var order_id = "{$order['id']}";
               if(remark.trim()==""){
                   showTip(1000,"请输入留言内容。");
                   return
               }
               
               $.post("{:U('shop/index/true_order_remark')}",{remark:remark,order_id:order_id,action:'add' }, function (ret) {
                    if(ret.status==1){
                        alert('留言成功！');
                    }else{
                        alert('留言失败！');
                    }
                    //window.location.reload();
               })
           })
        })
    });
</script>
</body>
</html>